
<template>
	<!-- 组件-教学计划表格 -->
	<div style="width:100%;">
		<el-row :gutter="10" style="margin-top:0.1rem;">
			<el-col :span="4">
				<el-select style="width:100%;" v-model="searchParam.year"></el-select>
			</el-col>
			<el-col :span="4">
				<el-select placeholder="所有班级" style="width:100%;" v-model="searchParam.date"></el-select>
			</el-col>
			<el-col :span="4">
				<el-input placeholder="搜索 学员姓名" v-model="searchParam.ketword"></el-input>
			</el-col>
			<el-col :span="2">
				<el-button>搜索</el-button>
			</el-col>
			<el-col :span="10" style="text-align:right;">
				<el-button @click="showSearchStudent">请假</el-button>
			</el-col>
		</el-row>
		<table class="table" cellspacing="0" style="width: 100%;margin-top:0.1rem;">
			<thead class="thead">
				<tr>
					<td style="width: 10%;">序号</td>
					<td style="width: 10%;">姓名</td>
					<td style="width: 15%;">班级名称</td>
					<td style="width: 10%;">请假类型</td>
					<td style="width: 10%;">请假开始时间</td>
					<td style="width: 10%;">请假结束时间</td>
					<td style="width: 10%;">请假天数</td>
					<td style="width: 15%;">请假提交时间</td>
					<td style="width: 10%;">操作</td>
				</tr>
			</thead>
			<tbody class="tbody">
				<tr v-for="(item,index) in tableList" :key="index">
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>
						<el-button type="text" @click="visibleDetialPopup(true)">详情</el-button>
					</td>
				</tr>
			</tbody>
		</table>
		<el-row>
			<!-- <el-col :span="4" style="padding-top: 0.15rem;">
				<el-checkbox v-model="checkAll"></el-checkbox>
				<el-button >批量请假</el-button>
			</el-col> -->
			<el-col :span="24">
				<el-pagination
					class="page"
					layout="total, sizes, prev, pager, next, jumper"
					:current-page="searchParam.currPage"
					@size-change="pageSizeChange"
					@current-change="curPageChange"
					:total="searchParam.total"
				></el-pagination>
			</el-col>
			
		</el-row>

		<!-- 学员搜索框 -->
        <el-dialog
          class="searchStudentPopup"
          :modal="false"
          :close-on-click-modal="false"
          title="请假"
          :visible.sync="searchStudentPopup.visible"
          v-loading.fullscreen.lock="searchStudentPopup.loading"
          element-loading-background="rgba(0, 0, 0, 0.1)"
         >
          <div class="box-studentSearch">
            <div class="txt">选择请假学员</div>
            <div class="rowbox">
              <el-input
                class="inputtxt"
                style="font-size:0.16rem;"
                placeholder="请输入关键字"
                v-model="searchStudentPopup.keywords"
                clearable
				ref="student_keywords"
                @keyup.enter.native="searchStudent"
              ></el-input>
              <el-button class="resetElement" type="primary" @click="searchStudent">查询</el-button>
            </div>
            <template>
              <el-table
                :data="searchStudentPopup.tableData"
                border
                max-height="240"
                style="width: 100%;font-size:0.16rem;"
                class="table"
                highlight-current-row
                @current-change="student_handleCurrentChange"
              >
                <el-table-column prop="student" label="学员"></el-table-column>
                <el-table-column prop="age" label="年龄"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
              </el-table>
            </template>
            <div class="rowbox" v-if="searchStudentPopup.tooMuchShow" style="text-align:right;margin:0.08rem 0;">
              <span>搜索结果过多，只展示前{{searchStudentPopup.tooMuchSize}}条</span>
            </div>
            <div class="rowbox bottom">
              <el-button  class="resetElement" type="primary" @click="searchStudentPopup.visible=false">取消</el-button>
              <el-button
                 class="resetElement" type="primary"
                :disabled="searchStudentPopup.nextbtn"
                @click="visibleLeavePopup(true)"
              >下一步</el-button>
            </div>
          </div>
        </el-dialog>
		<el-dialog
			:title="addLeavePopup.title"
			:visible.sync="addLeavePopup.visible"
			:close-on-click-modal="false"
			width="40%">
				<addLeave ref="addLeave"></addLeave>
		</el-dialog>
		<el-dialog
			:title="detialLeavePopup.title"
			:visible.sync="detialLeavePopup.visible"
			:close-on-click-modal="false"
			width="40%">
				<detialLeave ref="detialLeave"></detialLeave>
		</el-dialog>
	</div>
</template>

<script>
	let vm;
	import addLeave from './attendance_add_leave'
	import detialLeave from './attendance_detial_leave'
	export default{
		components:{addLeave,detialLeave},
		data(){
			return {
				searchParam:{
					year:'',
					date:'',
					keywords:'',
					currPage:1,
					pageSize:10,
					total:0
				},
				tableList:[{}],
				checkAll:false,
				searchStudentPopup:{
					visible:false,
					loading:false,
					keywords:'',
					tableData:[],
					studentDataList:[],
					selectStudent:null,
					tooMuchShow:false,
					tooMuchSize:20,
					nextbtn:true,
				},
				addLeavePopup:{
					title:'请假',
					visible:false,
				},
				detialLeavePopup:{
					title:'请假',
					visible:false,
				},
			}
		},
		methods:{
			campusChange : function(campusId) { //校区改变
				
			},
			init(){

			},
			pageSizeChange(val){
				this.searchParam.pageSize=val;
				this.search(1);
			},
			curPageChange(val){
				this.search(val);
			},
			search(pIndex){
				this.searchParam.currPage=pIndex||this.searchParam.currPage;

			},

			/**展示搜索框 */
			showSearchStudent(){
				//重置数据
				this.searchStudentPopup.tableData=[];
				this.searchStudentPopup.studentDataList=[];
				this.searchStudentPopup.nextbtn=true;
				this.searchStudentPopup.keywords='';
				this.searchStudentPopup.selectStudent=null;
				this.searchStudentPopup.tooMuchShow=false;
				this.searchStudentPopup.visible=true;
			},
			/**搜索充值学员 */
			searchStudent() {
				let searchname = this.searchStudentPopup.keywords;
				//验证规则
				var rules = [
					{
						judge: tool.judge("empty", searchname),
						focus: this.$refs.student_keywords,
						tips: "关键字不可为空！"
					}
				];
				if (!tool.validate(rules)) {
					return;
				}
				this.searchStudentPopup.tableData = [];
				this.searchStudentPopup.loading = true;
				api.auditionClueList({ 
					campusId: this.searchParam.campusId,
					keyword: searchname,
					classId:'',
					// courseId:'',
					classSyllabusId: '',
					currPage:1,
					pageSize:this.searchStudentPopup.tooMuchSize
				}).then(function(d) {
					if (d.result == "操作成功") {
						// debugger
						let studentList = d.list;
						vm.searchStudentPopup.tooMuchShow=false;
						if(d.totalCount>vm.searchStudentPopup.tooMuchSize){
							vm.searchStudentPopup.tooMuchShow=true;
						}
						vm.searchStudentPopup.studentDataList = studentList;
						let now = new Date();
						let year = now.getFullYear(),
						month = now.getMonth() + 1,
						day = now.getDate();
						for (let i = 0; i < studentList.length; i++) {
							let row = studentList[i];
							let phone = row.phone;
							//方法二
							let age = tool.minusDate(row.birthday);
							vm.searchStudentPopup.tableData.push({
								student: row.realName + "(" + (row.gender == 1 ? "男" : "女") + ")",
								age: age,
								phone: phone,
								key: i
							});
						}
						//清空上次选择
						vm.searchStudentPopup.selectStudent = null;
						vm.searchStudentPopup.nextbtn = true;
					}
					vm.searchStudentPopup.loading = false;
				})
				.catch(function() {
					vm.searchStudentPopup.loading = false;
				});
			},
			/**续费弹窗-表格选中 */
			student_handleCurrentChange(currentRow) {
				if (!currentRow) return;
				let index = currentRow.key;
				this.searchStudentPopup.selectStudent = this.searchStudentPopup.studentDataList[index];
				this.searchStudentPopup.nextbtn = false;
			},
			visibleLeavePopup(data){
				this.searchStudentPopup.visible=false;
				// this.searchStudentPopup.selectStudent
				this.addLeavePopup.visible=true;
				this.$nextTick(()=>{
					this.$refs['addLeave'].init(this.searchStudentPopup.selectStudent);
				});
			},
			visibleDetialPopup(val){
				this.detialLeavePopup.visible=val;
				this.$nextTick(()=>{
					this.$refs['detialLeave'].init({});
				});
			},
		},
		mounted(){
			vm=this;
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss" scoped>
	
	
	.searchStudentPopup {
		// z-index: 30 !important;
		// top: 0.81rem !important;
		// left: 2.1rem !important;
		// background-color:rgba(0,0,0,0.5) !important;
		// .el-dialog {
		// 	width: 8.55rem !important;
		// 	.el-dialog__title{
		// 		font-size: .22rem !important;
		// 		color: #333333 !important;
		// 	}
		// }
		.box-studentSearch{
			padding: 0 0.2rem 0 0.2rem;
			.el-table {
				max-height: 2.4rem !important;
				.el-table__body-wrapper {
				max-height: 1.92rem !important;
				}
			}
			.el-table__body tr.current-row > td {
				background-color: #5eabf9;
			}
			.el-button {
				margin: 0.1rem;
			}
			.txt {
				font-size: 0.16rem;
			}
			.rowbox.bottom {
				display: flex;
				justify-content: center;
				.btn {
					margin: 0.1rem 0.5rem;
				}
			}
			.inputtxt {
				width: 2.5rem;
				margin: 0.1rem;
				margin-left: 0;
			}
		}
	}
	/*自定义滚动条样式*/
	// .box-tasks::-webkit-scrollbar {
	// 	// height: 0.08rem;
	// 	width: 0.05rem;
	// }
	// .box-tasks::-webkit-scrollbar-thumb {
	// 	border-radius: 0.5rem;
	// 	background: #BBBBBB;
	// }
	// .box-tasks::-webkit-scrollbar-track {
	// 	background: rgba(242, 246, 252, 0);
	// }	

	
</style>
<style scoped src="@/style/module/table.css"></style>